<template>
  <div class="tab_box">

    <div class="app_background_two background-contain">
      <div class="background-gradual-change clearfix">
        <!--标题栏-->
        <header class="header-top clearfix" id='header'>
          <a class="header-title co-fl" href="javascript:;" @click="back()"><i class="iconfont icon-fanhui p-r-
05rem"></i></a>
          <h2 class="font-085rem text-center white-color" v-html="htmlTitle"></h2>
        </header>
        <!--特征库信息内容-->
        <section class="address-main p-b-065rem clearfix" id="address">

          <div class="address-left co-fl w75">
            <div class="address-main-t clearfix">
              <div class="address-main-t-l co-fl">
                <h3 class="font-32rem font-normal co-fl" v-html="specificNum">38</h3>
                <span class="co-fl" v-html="specificUnit">km</span>
              </div>

              <div class="address-main-t-r co-fl w65">
                <p class="text-ellipsis" v-html="locationInfo">广州市-市区</p>
                <p class="text-ellipsis" v-html="specififMode">明挖车站</p>
              </div>
            </div>
            <div class="address-main-b">
              <p class="text-ellipsis-2" v-html="moreInfo">默认运距 | 地下车站 1-3层 | 二类土质 | 抗震等级 3级 | 山
                体平整 </p>
            </div>
          </div>
          <div class="address-right co-fr w25 text-center m-t-10rem">
            <i class="iconfont dis-block font-20rem" :class=FnSpecialtyIocnFont(svaespecialtyCode)></i>
            <p class="text-ellipsis-2" >{{indexName}}专业主要特征</p>
          </div>
        </section>
      </div>
    </div>

    <!--专业swiper选择-->
    <div class="swiper-container-major m-t-08rem p-lr-065rem">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(items,index) in majorSwiperList" @click="bindClickIschooseIcon($event,items.specialtyCode,items.indexName);" :class=" index == specialtyindex ? 'chooseIconActive' : '' ">
          <img :src=imgUrl+items.indexCode+imgPng />
          <p class="p-tb-05rem p-l-025rem font-07rem text-center text-ellipsis">{{items.indexName}}</p>
        </div>
      </div>
      <!-- Add Pagination -->
      <!--<div class="swiper-pagination"></div>-->
    </div>

    <!--主要内容模块-->

    <section class="clearfix ">
      <p class="text-right p-lr-065rem p-tb-05rem font-08rem color-999999">指标特征</p>
      <div class="feature-fixed">
        <p  v-if="indexattrsubscriptionList=='' || indexattrsubscriptionList == 'null'" class="SContentData text-center color-999999">暂无数据</p>
        <scroller :on-infinite="infinite"  ref="attrsubscriptionlist">
          <ul class="vertical-list clearfix overflow-scroll">
            <li v-for="(items,index) in indexattrsubscriptionList">
              <p class="co-fl font-07rem p-l-025rem">
                {{items.attrName}}<span class="color-999999"></span>
              </p>
              <i class="iconfont icon-guanbi-shanchu small-custom-icon" @click="delData(index)"></i>
            </li>
          </ul>
        </scroller>
      </div>
    </section>


    <div class="p-tb-075rem clearfix text-center tezheng-fixed">
      <i @click="show('#tezheng_pop')" id="show_tezheng" class="iconfont icon-zuoce-changyong-gaoliang common-custom-icon font-15rem text-center"></i>
    </div>


    <!--页面所需弹窗-->
    <div id="pop">

      <!--请选择您常用的指标-->
      <section id="zhibiao_pop" class="coui-pop-bg-two BoxWrap">
        <div class="coui-pop-main p-b-25rem">
          <div class="title-main text-center text-ellipsis p-lr-10rem">请选择你常用的指标</div>
          <div id="iconListBox">
            <ul class="choose-target-up text-center p-t-075rem p-b-022rem swiper-wrapper">
              <li class="swiper-slide" v-for="(List,index) in industryCodeWindList" @click="bindClickIschooseIcon($event,List.specialtyCode,List.indexType,List.industryCode);" :class=" index == 0 ? 'chooseIconActive' : '' "  :data-indexcode=List.specialtyCode >
                <a href="javascript:;">
                  <i class="dis-block iconfont" :class=FnSpecialtyIocnFont(List.specialtyCode)></i>
                  <span class="text-ellipsis-2">{{List.indexName}}</span>
                </a>
              </li>
              <!--<li class="swiper-slide"><a href="javascript:;"><i class="dis-block iconfont icon-zuoce-chezhan"></i><span class="text-ellipsis-2">车站</span></a></li>
              <li class="swiper-slide"><a href="javascript:;"><i class="dis-block iconfont icon-zuoce-chezhan"></i><span class="text-ellipsis-2">区间</span></a></li>

              <li class="swiper-slide"><a href="javascript:;"><i class="dis-block iconfont icon-zuoce-chezhan"></i><span class="text-ellipsis-2">路线</span></a></li>
              <li class="swiper-slide"><a href="javascript:;"><i class="dis-block iconfont icon-zuoce-chezhan"></i><span class="text-ellipsis-2">车站</span></a></li>
              <li class="swiper-slide"><a href="javascript:;"><i class="dis-block iconfont icon-zuoce-chezhan"></i><span class="text-ellipsis-2">区间</span></a></li>-->
            </ul>
          </div>
          <!--默认线条-->
          <div class="line-1"></div>
          <p class="color-999999 font-07rem p-lr-05rem p-t-05rem">*影响80%造价占比为以下推荐指标</p>
          <div style="height: 11rem;">
            <scroller :on-infinite="SaveIndexinfinite"  ref="SaveIndexlist">
              <ul class="choose-target-down overflow-scroll p-lr-10rem m-t-05rem" id="ChoosedIndexBox">
                <li v-for="(item,index) in dataQuerybyspecialtycodeList" @click="chooseNorm($event)" :class="index == 0 ? 'cur' : ''" :data-indextype=item.indexType :data-indexcode=item.indexCode :data-indexname=item.indexName>
                  <a href="javascript:;">
                    <span class="left-icon iconfont co-fl" :class=FnSpecialtyIocnFont(item.specialtyCode)></span>
                    <span class="w65 text-ellipsis co-fl font-07rem" >{{item.indexName}}-{{item.parent.indexName}}</span>
                    <i class="iconfont icon-gou small-custom-icon choose-boolean co-fr" :class="index == 0 ? 'cur' : ''"></i>
                  </a>
                </li>
              </ul>
            </scroller>
          </div>
        </div>
        <!--默认-->
        <i class="small-chunk"></i>
        <div class="common-custom-icon co-button-sure text-center" @click="clickHide('#zhibiao_pop','#tezheng_pop',$event)"><i class="iconfont icon-gou font-15rem"></i></div>
      </section>

      <!--请选择您关注的特征-->
      <section id="tezheng_pop" class="coui-pop-bg-two BoxWrap">
        <div class="coui-pop-main p-b-22rem">
          <div class="title-main text-center text-ellipsis p-lr-10rem">请选择您关注的特征</div>

          <div class="trait-up p-tb-025rem">
            <div class="trait-up-main p-tb-025rem p-lr-10rem">
              <i class="trait-up-main-left iconfont co-fl p-r-05rem" :class=FnSpecialtyIocnFont(svaespecialtyCode)></i>
              <div class="trait-up-main-right co-fl">
                <h4 class="font-09rem text-ellipsis-2 line-h-14rem">{{indexName}}</h4>
                <p class="color-999999">*80%以上的概率会出现的默认特征</p>
              </div>
            </div>
            <ul class="crosswise-select-choose p-lr-05rem p-tb-05rem clearfix">
              <li v-for="List in IndexAttrList.slice(0,4)">
                <span class="attrName">{{List.attrName}}</span>
                <!--<a class="select-box text-ellipsis" href="javascript:;">明挖</a>-->
                <a class="SelectBox" href="javascript:;">
                  <select name="" id="" class="left" :data-attrId=List.id >
                    <option v-if="List.scope != ''" v-for="selectList in List.scope.split(',')">{{selectList}}
                    </option>
                    <option v-else="List.scope == ''">无</option>
                  </select>
                </a>
              </li>
            </ul>
          </div>

          <!--默认线条-->
          <div class="line-1"></div>

          <ul class="vertical-select-choose p-lr-075rem m-tb-075rem overflow-scroll h70rem clearfix">
            <li v-for="List in IndexAttrList.slice(4,IndexAttrList.length)">
              <i class="iconfont icon-bianji co-fl color-999999"></i>
              <span class="co-fl text-ellipsis w30 font-07rem p-l-025rem">{{List.attrName}}</span>
              <!--    <a class="select-box co-fl w45 text-ellipsis" href="javascript:;">1-3层</a>-->
              <a href="javascript:;" class="co-fl w45" >
                <select :data-attrId=List.id>
                  <option v-if="List.scope != ''" v-for="selectList in List.scope.split(',')">{{selectList}}
                  </option>
                  <option v-else="List.scope == ''">无</option>
                </select>
              </a>
              <i class="iconfont icon-gou small-custom-icon choose-boolean co-fr" @click="bindClickVerticalChoose
($event);"></i>
            </li>
          </ul>

          <!--默认线条-->
          <div class="line-1"></div>

          <div class="trait-down">
            <p class="p-tb-05rem text-center color-999999 ">单位：运距（km）</p>
            <div class="wrap">
              <div class="text-center">
                <div class="timeValue" initial-value="8" value="0">0</div>
              </div>
              <div class="timer-wrap">
                <div class="timer" id="timerId" value="0" data-initial='true'>
                  <ul>
                    <li></li>
                    <li>0</li>
                    <li>10</li>
                    <li>20</li>
                    <li>30</li>
                    <li>40</li>
                    <li>50</li>
                    <li>60</li>
                    <li>70</li>
                    <li>80</li>
                    <li>90</li>
                    <li>100</li>
                    <li></li>
                    <li></li>
                  </ul>
                </div>
                <div class="mark"></div>
              </div>
            </div>
          </div>
        </div>
        <!--默认-->
        <i class="small-chunk"></i>
        <div class="common-custom-icon co-button-sure text-center" @click="hide('#tezheng_pop',$event)"><i
          class="iconfont icon-gou font-15rem"></i></div>
      </section>
    </div>

    <!--加载-->
    <loading v-show="FangLoading"></loading>
    <fangerror :fangerroring="fangerroring" :fangerrorText="fangerrorText"></fangerror>


  </div>

</template>

<script src="../../../static/js/feature.js"></script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../../static/plugins/swiper4x/swiper.min.css"
  @import "../../../static/css/metro-feature.css"
  @import "../common/stylus/meta.styl";
  @import "../../../static/js/lib/select2/css/select2.styl";
</style>
